<template>
  <BasicModal
    :visible="visible"
    title="编辑拓扑"
    :min-height="120"
    :height="120"
    :show-ok-btn="true"
    :show-cancel-btn="true"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form ref="form" :model="formData">
      <a-form-item label="名称" name="name" :rules="[{ required: true }]">
        <a-input v-model:value="formData.name" />
      </a-form-item>
      <a-form-item label="描述" name="desc" :rules="[{ required: true }]">
        <a-input v-model:value="formData.desc" />
      </a-form-item>
    </a-form>
  </BasicModal>
</template>

<script>
  import { Form, FormItem, Input } from 'ant-design-vue'
  import { BasicModal } from '/@/components/Modal'
  import { useModuleStoreWithOut } from '/@/store/modules/module'

  export default {
    components: {
      'a-input': Input,
      'a-form': Form,
      'a-form-item': FormItem,
      BasicModal,
    },
    props: {
      topoData: Object,
      visible: Boolean,
    },
    emits: ['ok', 'cancel'],
    data: function () {
      return {
        store: useModuleStoreWithOut(),
        selectVisible: false,
        formData: {
          id: 0,
          name: '',
          desc: '',
        },
      }
    },
    mounted() {
      this.formData.id = this.topoData.id
      this.formData.name = this.topoData.name
      this.formData.desc = this.topoData.desc
    },
    methods: {
      handleCancel() {
        this.$emit('cancel')
      },
      handleOk() {
        this.$refs.form
          .validate()
          .then(() => {
            this.$emit('ok', this.formData)
          })
          .catch((error) => {
            console.log('error', error)
          })
      },
    },
  }
</script>
